<template>
  <div>
      <h1>我是父组件</h1>
      <img :src="sImg"  style="width:300px;height: 300px;">
      <h1>子组件传来的数据：{{sonData}}</h1>
      <h1>子组件传来车：{{sCar}}</h1>
      <!-- 显示子组件传来的用户信息 -->
          <h1>用户名：{{sUser.username}}</h1>
          <h1>年龄：{{sUser.age}}</h1>
          <h1>城市：{{sUser.city}}</h1>
      <h1>子传父数据</h1>
       <hr>
       <!-- 子组件 -->
        <!-- 父组件自定义事件 -->
       <mine-son @sendImg="getImg" @sendUser="getUser" @sendMsg="getData" ></mine-son>
  </div>
</template>
<script>
import mineSon from './child/mineSon.vue'
// 面试题：父子组件的生命周期加载顺序是什么
// 先执行父组件：beforeCreate->created->beforeMount
// 在子组件：beforeCreate->created->beforeMount->mounted
// 最后在执行父组件的mounted
export default {
  name:"Mine",
  components:{mineSon},
  data(){
    return {
      sonData:"",
      sCar:"",
      sUser:"",
      sImg:""
    }
  },
  methods:{
    getData(mymsg,car){ //自定义事件触发的函数
      //事件函数形参就是传来的值
      console.log(mymsg,"事件函数形参就是传来的值")
      this.sonData=mymsg;//存一下子组件传来的数据
      this.sCar=car//接受子组件传来的第二个数据
    },
    getUser(user){
        console.log(user)
        this.sUser=user;//接受子组件传来的用户信息
    },
    getImg(img){
     this.sImg=img//接受 子组件加载完传来的图片
    }
  },
  beforeCreate() {
    console.log("父父父组件的--创建前beforeCreate--生命周期")
  },
  created(){  
       
        console.log("父父父组件的--创建后created--生命周期")
  },
  beforeMount() {
     console.log("父父父组件的--挂载前beforeMount--生命周期")
  },
  mounted(){
      console.log("父父父组件的--挂载后mounted--生命周期")
  },
}
</script>